<template>
  <div class="transition">
    <van-button @click="show = !show">切换动画</van-button>
    <transition name="move">
      <div v-if="show" class="dot"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'transition1',
  data() {
    return {
      show: true
    }
  }
}
</script>

<style lang="less" scoped>
.dot {
  width: 45px;
  height: 45px;
  background-color: darkkhaki;
  border-radius: 100%;
}
.transition {
  .move-enter-active,
  .move-leave-active {
    transition: all 2s;
  }
  .move-enter {
    transform: translate(350px, 780px);
  }
  .move-enter-to {
    transform: translate(0, 0);
  }
  .move-leave /* .fade-leave-active below version 2.1.8 */ {
    transform: translate(0, 0);
  }
  .move-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translate(350px, 780px);
  }
}
</style>
